<template>
  <ShopEdit
    v-if="isEditing"
    :shop-data="shopDataForEdit"
    :is-editing.sync="isEditing"
  />
  <div v-else class="shop-info">
    <ElCard>
      <ElRow
        ><ElCol :span="12">
          <span class="title">门店名称：</span> {{ shop.shop_name }} </ElCol
        ><ElCol :span="12"
          ><span class="title">服务类型：</span>
          {{ shop.is_door && shop.is_door.data }}</ElCol
        ></ElRow
      >
      <ElRow
        ><ElCol :span="12"
          ><span class="title">固定电话：</span> {{ shop.fixed_line }}</ElCol
        ><ElCol :span="12"
          ><span class="title">移动电话：</span> {{ shop.shop_phone }}</ElCol
        ></ElRow
      >
      <ElRow
        ><ElCol :span="24"
          ><span class="title">门店展示：</span
          >{{ shop.is_show && shop.is_show.data }}</ElCol
        ></ElRow
      >
      <ElRow class="no-margin"
        ><ElCol :span="24"
          ><span class="title">门店地址：</span>
          {{ shop.region && shop.region.mergename }}{{ shop.address }}</ElCol
        ></ElRow
      >
    </ElCard>
    <ElCard>
      <ElRow class="intro"
        ><ElCol :span="12"
          ><span class="title">门店照片：</span>
          <div class="content img">
            <img
              :src="(shop.shop_photo && shop.shop_photo.photo) || defaultImage"
            /></div></ElCol
        ><ElCol :span="12"
          ><span class="title">门店微信：</span>
          <div class="content img no-border">
            <img :src="shop.ticket || defaultImage" /></div></ElCol
      ></ElRow>
      <ElRow v-if="shop.is_show && shop.is_show.value" class="no-margin intro"
        ><ElCol :span="12"
          ><span class="title">营业执照：</span>
          <div class="content img">
            <img
              :src="(shop.license && shop.license.photo) || defaultImage"
            /></div></ElCol
        ><ElCol :span="12"
          ><span class="title">软件授权书：</span>
          <div class="content img">
            <img
              :src="(shop.grant && shop.grant.photo) || defaultImage"
            /></div></ElCol
      ></ElRow>
    </ElCard>
    <ElCard v-if="shop.is_show && shop.is_show.value">
      <ElRow
        ><ElCol :span="12"
          ><span class="title">法人姓名：</span> {{ shop.legal_name }} </ElCol
        ><ElCol :span="12"
          ><span class="title">法人电话：</span> {{ shop.legal_tel }}</ElCol
        ></ElRow
      >
      <ElRow class="no-margin intro"
        ><ElCol :span="12"
          ><span class="title">身份证：</span>
          <div class="content img">
            <img
              :src="(shop.id_card && shop.id_card[0].photo) || defaultImage"
            /></div></ElCol
        ><ElCol :span="12"
          ><span class="title"></span>
          <div class="content img">
            <img
              :src="(shop.id_card && shop.id_card[1].photo) || defaultImage"
            /></div></ElCol
      ></ElRow>
    </ElCard>
    <ElCard v-if="shop.is_show && shop.is_show.value">
      <ElRow class="no-margin intro"
        ><ElCol :span="24"
          ><span class="title">门店介绍：</span>
          <div class="content">{{ shop.shop_profile }}</div></ElCol
        ></ElRow
      >
    </ElCard>

    <div class="submit">
      <ElButton round @click="edit">修改</ElButton>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import {http, catchAppError} from '@/util';
import url from '@/config';
import ShopEdit from '@/components/shop/ShopEdit.vue';
import defaultImage from '@/assets/img/default.jpg';

export default {
  name: 'Shop',
  components: {ShopEdit},
  data() {
    return {
      isEditing: false,
      defaultImage,
      shop: {},
      shopDataForEdit: {}
    };
  },
  beforeMount() {
    http
      .post(url.shop)
      .then(res => {
        this.shop = res;
      })
      .catch(catchAppError);
  },
  methods: {
    edit() {
      this.isEditing = true;
      this.shopDataForEdit = _.cloneDeep(this.shop);
      window.scrollTo(0, 0);
    }
  }
};
</script>

<style lang="scss">
.shop-info {
  font-size: 16px;
  .title {
    color: #333;
    font-size: 16px;
  }
  .submit {
    margin-top: 55px;
    text-align: center;
    .el-button {
      width: 230px;
      padding: 14px 0;
      background-color: #ffb03e;
      border-color: #ffb03e;
      color: #fff;
    }
  }
  .el-card {
    margin-bottom: 20px;
    .el-card__body {
      color: #999;
      padding: 25px;
      .el-row {
        &.intro {
          position: relative;
          .title {
            position: absolute;
          }
          .content {
            margin-left: 95px;
            &.img {
              width: 270px;
              height: 200px;
              // border: 1px dashed #b4b4b4;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            &.no-border {
              border: none;
              display: block;
              img {
                height: 200px;
                width: 200px;
              }
            }
            img {
              width: 100%;
            }
          }
        }
        &.no-margin {
          margin-bottom: 0;
        }
        margin-bottom: 50px;
      }
    }
  }
}
</style>
